<template>
    <div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="待审核帖子" name="0">
            </el-tab-pane>
            <el-tab-pane label="被封禁帖子" name="1">
            </el-tab-pane>
            <el-tab-pane label="过审核帖子" name="2">
            </el-tab-pane>
            <el-tab-pane label="已驳回帖子" name="3">
            </el-tab-pane>
        </el-tabs>
        <el-table :data="tableData" style="width: 100%; height:500px">
            <el-table-column prop="id" label="ID" />
            <el-table-column prop="createTime" label="创建时间" />
            <el-table-column prop="title" label="标题">
                <template #default="scope">
                    <el-text class="w-150px mb-2" v-html="scope.row.title" truncated />
                </template>
            </el-table-column>
            <el-table-column label="图片">
                <template #default="scope">
                    <img :src="scope.row.imgurl[0]" style="width: 50px; height: 50px;" />
                </template>
            </el-table-column>
            <el-table-column prop="content" label="内容">
                <template #default="scope">
                    <el-text class="w-150px mb-2" v-html="scope.row.content" truncated />
                </template>
            </el-table-column>
            <el-table-column prop="status" label="状态">
                <template #default="scope">
                    <el-tag
                        :type="scope.row.status === 0 ? 'warning' : (scope.row.status === 1 ? 'danger' : (scope.row.status === 3 ? 'info' : 'success'))">
                        {{ scope.row.status === 0 ? '待审核' : (scope.row.status === 1 ? '已封禁' : (scope.row.status === 3 ?
                            '已驳回' : '审核通过')) }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope" v-if="activeName == 0">
                    <el-button type="primary" @click="pass(scope.row.id)">通过</el-button>
                    <el-button type="danger" @click="showRejectDialog(scope.row.id)">驳回</el-button>
                    <el-dialog v-model="rejectDialogVisible" title="驳回理由" :visible.sync="rejectDialogVisible" width="80%"
                        :append-to-body="true" :close-on-click-modal="false" :modal="true">
                        <el-input v-model="rejectReason" placeholder="请输入驳回理由"></el-input>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="rejectDialogVisible = false">取消</el-button>
                            <el-button type="primary" @click="refuse(scope.row.id)">确定</el-button>
                        </span>
                    </el-dialog>
                </template>
                <template #default="scope" v-if="activeName == 1">
                    <el-button type="primary" @click="pass(scope.row.id)">解封</el-button>
                </template>
                <template #default="scope" v-if="activeName == 2">
                    <el-button type="danger" @click="XXX(scope.row.id)">封禁</el-button>
                </template>
                <template #default="scope" v-if="activeName == 3">
                    <el-button type="primary" @click="pass(scope.row.id)">取消驳回并通过</el-button>
                </template>
            </el-table-column>
            <el-table-column v-if="activeName == 3" prop="reason" label="驳回理由" />
            <el-table-column label="查看详情">
                <template #default="scope">
                    <el-button @click="showDetail(scope.row)">查看详情</el-button>
                    <!-- 查看详情 -->
                    <el-dialog v-model="detailDialogVisible" title="帖子详情" :visible.sync="detailDialogVisible" width="80%"
                        :append-to-body="true" :close-on-click-modal="false" :modal="true">
                        <div>
                            <el-card>
                                <div slot="header">
                                    <h3>{{ detailValue.title }}</h3>
                                </div>
                                <div>
                                    <img v-for="url in detailValue.imgurl" :key="url" :src="url" alt="图片"
                                        style="width: 100px; height: 100px; object-fit: cover; margin-right: 10px;">
                                </div>
                                <div>
                                    <p>帖子内容: {{ detailValue.content }}</p>
                                    <p>创建时间: {{ detailValue.createTime }}</p>
                                    <p>点赞数: {{ detailValue.thumbNum }}</p>
                                    <p>收藏数: {{ detailValue.collectionNum }}</p>
                                    <p>状态:
                                        <el-tag
                                            :type="detailValue.status === 0 ? 'warning' : (detailValue.status === 1 ? 'danger' : 'success')">
                                            {{ detailValue.status === 0 ? '待审核' : (detailValue.status === 1 ? '已封禁' : '过审核') }}
                                        </el-tag>
                                    </p>

                                    <p>
                                        <span>发布者信息</span><br />
                                        <span>昵称: {{ detailValue.user.nick }}</span><br />
                                        <span>用户名: {{ detailValue.user.username }}</span><br />
                                        <span>性别: {{ detailValue.user.gender }}</span><br />
                                        <span>头像: <img :src="detailValue.user.avatar" alt="头像"
                                                style="width: 30px; height: 30px; object-fit: cover; border-radius: 50%;"></span><br />
                                        <span>签名: {{ detailValue.user.sign }}</span><br />
                                        <span>用户状态: {{ detailValue.user.userStatus ? '启用' : '禁用' }}</span><br />
                                    </p>
                                </div>
                            </el-card>
                        </div>
                        <template #footer>
                            <span class="dialog-footer">
                                <el-button type="primary" @click="">通过</el-button>
                                <el-button type="primary" @click="">不通过</el-button>
                            </span>
                        </template>
                    </el-dialog>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination style="margin-top: 20px;" v-model:currentPage="currentPage" v-model:pageSize="pageSize"
            :page-sizes="[2, 5, 7, 10]" layout="total, sizes, prev, pager, next, jumper" :total="total"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
</template>

<script setup>
import { DeleteOutlined, EditOutlined, SearchOutlined, SettingOutlined } from '@ant-design/icons-vue';
import { InfoFilled } from '@element-plus/icons-vue'
import axios from '../../axios.js';
import { ref, onBeforeMount, watchEffect, reactive } from 'vue'
import { ElMessage } from 'element-plus';
/* 分页 */
const activeName = ref(0)
const total = ref(1)
const currentPage = ref(1)
const pageSize = ref(3)
const handleSizeChange = (val) => {
    console.log(`${val} items per page`)
    pageSize.value = val
    getPost()
}
const handleCurrentChange = (val) => { console.log(`current page:${val}`); currentPage.value = val }
/* 获取帖子数据 */
const tableData = ref([]);
let netData = ref([])
const getPost = async () => {
    const { data: res } = await axios.get(`/post/page`, {
        params: {
            pageNum: currentPage.value,
            pageSize: pageSize.value,
            status: activeName.value
        }
    })
    console.log(res);
    tableData.value = [];
    res.data.records.forEach(ele => {
        tableData.value.push({
            id: ele.idZzxcsm,
            userId: ele.userIdZzxcsm,
            createTime: ele.createTimeZzxcsm,
            title: ele.titleZzxcsm,
            imgurl: ele.imgurlZzxcsm.split(','),
            content: ele.contentZzxcsm,
            thumbNum: ele.thumbNumZzxcsm,
            collectionNum: ele.collectionNumZzxcsm,
            status: ele.statusZzxcsm,
            reason: ele.refuseReasonZzxcsm,
            user: {
                id: ele.user.idZzxcsm,
                nick: ele.user.nickZzxcsm,
                username: ele.user.usernameZzxcsm,
                password: ele.user.passwordZzxcsm,
                gender: ele.user.genderZzxcsm,
                avatar: ele.user.avatarZzxcsm,
                sign: ele.user.signZzxcsm,
                userStatus: ele.user.statusZzxcsm === 1 ? true : false
            }
        });
    })
    total.value = res.data.total
    netData.value = tableData.value
}
getPost()
/* 切换tab时的事件 */
const handleClick = (tab, event) => {
    activeName.value = tab.index
    getPost()
}
/* 切换用户状态 */
/* 详情对话框 */
const detailDialogVisible = ref(false)
/* 通过或者拒绝 */
const detailValue = ref("")
const showDetail = (val)=>{
    detailDialogVisible.value = true;
    detailValue.value = val
}
const rejectDialogVisible = ref(false)
const rejectReason = ref("")
const showRejectDialog = (id) => {
    rejectDialogVisible.value = true;
    // 在这里可以将 id 保存到 data 中，以便在提交时使用
}
const handleReject = () => {
    // 在这里处理驳回操作，可以使用 this.rejectReason 获取驳回理由
    // 处理完毕后关闭对话框
    rejectDialogVisible.value = false;
}
const pass = async (id) => {
    const { data: res } = await axios.put(`/post/${id}/${2}`)
    getPost()
}
const refuse = async (id) => {
    console.log(rejectReason.value);
    const { data: res } = await axios.put(`/post/refuse/${id}/${rejectReason.value}`)
    getPost()
    rejectDialogVisible.value = false
}
const XXX = async (id) => {
    const { data: res } = await axios.put(`/post/${id}/${1}`)
    getPost()
}

</script>

<style scoped></style>
